<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风景时钟</title>
    <style type="text/css">
        #mycan{
            border: 1px solid #08ff00;
            text-align: center;
        }
    </style>
</head>
<body>
<canvas id="mycan" width="800" height="800"></canvas>
<script type="text/javascript">
    function time() {
        var context = document.getElementById("mycan").getContext("2d");
        //绘制外层圆
        context.clearRect(0, 0, 1000, 800);
        context.beginPath();
        context.arc(400, 400, 200, 0, Math.PI * 2);
        context.lineWidth = 10;
        context.strokeStyle = "green";
        context.stroke();
        context.closePath();
        //绘制圆心
        context.beginPath();
        context.arc(400, 400, 6, 0, Math.PI * 2);
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();
        context.closePath();
        //获取系统时间
        var now = new Date();
        var seconds = now.getSeconds();
        var minutes = now.getMinutes();
        var hours = now.getHours();
        var date = now.getDate();
        //把时间放入
        context.beginPath();
        context.font = "Bold 30px Arail";
        context.fillStyle = "violet";
        context.fillText("      "+
                        now.getFullYear() +
                        "年" +
                        (now.getMonth()+1) +
                        "月" +
                        now.getDay() +
                        "日",
                        250,100);
        context.closePath();
        //12小时，超过12减12
        if (hours > 12) {
            hours = hours - 12;
        }
        //绘制刻度
        var hours1 = hours + minutes / 60;
        for (var i = 0; i < 60; i++) {
            context.save();
            context.lineWidth = 7;
            context.strokeStyle = "black";
            context.translate(400, 400);
            context.rotate((i * 6 * Math.PI) / 180);
            if (i == 0 || i % 5 == 0) {
                context.beginPath();
                context.moveTo(0, -170);
                context.lineTo(0, -190);
                context.stroke();
                context.closePath()
            } else {
                context.beginPath();
                context.moveTo(0, 180);
                context.lineTo(0, 190);
                context.stroke();
                context.closePath();
            }
            context.restore();
        }
        //绘制时针
        context.save();
        context.lineWidth = 6;
        context.strokeStyle = "gray";
        context.translate(400, 400);
        context.rotate((hours1 * 30 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 10);
        context.lineTo(0, -120);
        context.stroke();
        context.closePath();
        context.restore();
        //绘制分针
        context.save();
        context.lineWidth = 4;
        context.strokeStyle = "#CCCCCC";
        context.translate(400, 400);
        context.rotate((minutes * 6 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 14);
        context.lineTo(0, -140);
        context.stroke();
        context.closePath();
        context.restore();
        //绘制秒针
        context.save();
        context.lineWidth = 2;
        context.strokeStyle = "#C8C8C8";
        context.translate(400, 400);
        context.rotate((seconds * 6 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 16);
        context.lineTo(0, -160);
        context.stroke();
        context.closePath();
        context.beginPath();
        context.beginPath();
        context.arc(0, -130, 4, 0, Math.PI * 2);
        context.lineWidth = 2;
        context.strokeStyle = "red";
        context.stroke();
        context.closePath();
        context.restore();
    }

    setInterval(time, 1000);
    time();
</script>
</body>
</html>